<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻</title>
    <script src="./units/jquery-3.6.0.js"></script>
    <link rel="stylesheet" href="./Css/news.css">
</head>

<body>
    <br>
    <div class="newsBox">
        <br>
        <h1>(*^▽^*)</h1>
        <hr>
        <ul>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <li><span>新闻内容</span></li>
        </ul>
    </div>
    <div class="close">
        <span>Back</span>
        <img src="./images/close.png" alt="">
    </div>
    <div class="shop">
        <span>商品渲染</span>
        <img src="./images/shop.png" alt="">
    </div>
    <script>
        /* 
                    jq的ajax的用法
                    $.ajax({
                        url:'地址、接口',
                        data:{}  //给后台的数据
                        methods:'get,post'  默认是get
                        success:(res)=>{
                            //res就是后台给我们的数据
                        }
                    })
                */
        const oUl = document.querySelector('ul');
        const oB = document.querySelector('.close');
        const oShop = document.querySelector('.shop');

        //一上来获取数据
        $.ajax({
            url: '/getNews',
            success: ({ data }) => {
                data.forEach((v) => {
                    let oLi = document.createElement('li');
                    oLi.innerHTML = `<a href="${v.link}" target="_blank">${v.title}</a>`;
                    oUl.appendChild(oLi);
                })
            }
        })
        oB.addEventListener('click', () => {
            history.back();
        });
        oShop.addEventListener('click',()=>{
            open('shop.html')
        })

    </script>
</body>

</html>